<template>
  <div class="store-container">
    <div class="userInfo">
        <div class="avatar">
            <img src="../../../../assets/cart_empty@2x.png">
            <span>{{storesNumber}}</span>
        </div>
        <div class="storesName">
            <span class="newGoods">{{storesName}}</span>
            <div class="address">
            <van-icon name="location" class="vanIcon"/>
            <span>{{StoreAddress}}</span>
            </div>
            <span class="distance">距离：{{storesDistance}}&nbsp; 米</span>
        </div>
        <slot  class="slot-icon" name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StoreInfo',
  components: {},
  props: {
    // 商店名
    storesName: {
      type: String,
      default: ''
    },
    // 商店地址
    StoreAddress: {
      type: String,
      default: '长沙市.岳麓区.东方红'
    },
    // 商店账号
    storesNumber: {
      type: [Number, String],
      default: 123
    },
    // 商店距离
    storesDistance: {
      type: [Number, String],
      default: 123
    }
  },
  data () {
    return {

    }
  },
  computed: {},
  watch: {},
  created () {

  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style scoped lang="less">
.userInfo {
  width:98%;
  height: 180px;
  margin: 1%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid #02b6fd;
  .avatar {
    margin-left: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
    }
    span{
      font-size: 30px;
      color: #b11;
      margin-top: 10px;
    }
  }
  .storesName{
    padding: 10px;
    display: flex;
    flex-direction: column;
    .newGoods {
      margin-top: 10px;
      font-size: 35px;
    }
    .address{
    display: inline;
    margin-top: 10px;
    overflow: hidden;
    margin-left: -15px;
      .vanIcon {
        color: #0039fd;
        font-size: 30px;
      }
      span {
        font-size: 20px;
        white-space: nowrap;
        margin-left: 10px;
    }
    }
    .distance {
      font-size: 28px;
      padding-left: 30px;
    }
  }
  .slot-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right:20px ;
  }
}
</style>
